<template>
  <div class="header-div flex-row">
    <p class="flex-row">
      <van-icon name="newspaper-o" class="news active" />
      <i class="active head-text">{{ i18n.$t('lookNews') }}</i>
    </p>
    <van-popover
      class="header-div"
      v-model:show="showPopover"
      teleport="#app"
      :actions="actions"
      @select="popSelect"
    >
      <template #reference>
        <p class="head-text"> En </p>
      </template>
    </van-popover>
  </div>
</template>

<script lang="ts">
  import { useI18n } from '@/i18nPlugin'
  import { ref, defineComponent } from 'vue'
  import { useRouter } from 'vue-router'

  export default defineComponent({
    nem: 'HeaderLogo',
    props: {
      headeType: {
        type: String,
        default: ''
      }
    },
    setup: (props, context) => {
      const router = useRouter()
      const i18n = useI18n()
      const showPopover = ref(false)
      const headType = ref(props.headeType)
      const actions = [{ text: '中文' }, { text: 'English' }]
      let popSelect = (item: any) => {
        const locale = item.text === '中文' ? 'en' : 'es'
        i18n.locale.value = locale
      }
      let goToBack = () => {
        context.emit('goBack')
      }
      return {
        actions,
        i18n,
        popSelect,
        showPopover,
        headType,
        goToBack
      }
    }
  })
</script>

<style scoped lang="scss">
  .header-div {
    width: 100%;
    padding: 0 10%;
    height: 80px;
    position: fixed;
    z-index: 1000;
    top: 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    p:nth-child(1) {
      font-size: 28px;
      .van-icon {
        font-size: 32px;
      }
    }
  }
  .van-popover__content {
    width: 100%;
  }
  .active {
    color: $theme-active !important;
  }
  .head-text {
    font-size: 24px;
  }
  .head-pop {
    :deep(.van-popover__action-text),
    :deep(.van-popover__action) {
      height: 100px;
    }
  }

</style>
